@charset "utf-8";
@import "option_common/option_common";

.movie{
//   display: none;
     position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
   overflow: hidden;
    .movie_back{
        img{
            width: 100%;
             height: 100%;
        }
    }
    .movie_character{
        position: absolute;
        top: r(70px);
        left: r(20px);
         animation: character .5s linear  2s  ;
       animation-fill-mode: forwards;
        img{
         width: 90%;   
        }
    }
    .movie_figure{
        position: absolute;
        top: r(200px);
        left: r(80px);
         animation: figurem .5s linear  2s infinite;
       animation-fill-mode: forwards;
       
        img{
            width: 100%;
        }
    }
    .movie_waht{
        position: absolute;
        top: r(300px);
        right: r(-60px);
         animation: what 1s linear  2s infinite;
       animation-fill-mode: forwards;
         animation-name:zoomInDown ;
        img{
            width: 50%;
        }
    }
    .movie_wall{
        position: absolute;
        bottom: r(240px);
        left: r(0px);
        animation: wall 1s linear  2s infinite;
       animation-fill-mode: forwards;
        img{
            width: 100%;
        }
    }
}
@keyframes what{
    0%{
        width: 10%;
    }
    to{
        width:30%；
     
    }
}
@keyframes figurem{
   0% {
        transform: translateX(0px);
    }
    25% {
        transform: translateX(-20px);
    }
    50% {
        transform: translateX(0px);
    }
    75% {
        transform: translateX(20px);
    }
    100% {
        transform: translateX(0px);
    }
}
@keyframes wall{
    0% {
        transform: translateX(0px);
    }
    25% {
        transform: translateX(2px);
    }
    50% {
        transform: translateX(0px);
    }
    75% {
        transform: translateX(-2px);
    }
    100% {
        transform: translateX(0px);
    }
}
@keyframes character{
    0%{
//      width: 0%;
        transform: scale(0.1);
    }
    to{
//      width: 100%;
        transform: scale(1);
    }
}
